<div id="query_builder" class="form-group" style="flex-wrap: nowrap !important">
  <div id="query_builder_header"></div>
    <div id="query_builder_layers" class="margin-between-element">
      <label class="querybuilder-title" v-t="'sdk.querybuilder.panel.layers'"></label>
      <select id="query_builder_layers_select" class="form-control">
        <option v-for="(layer, index) in layers" :key="layer.label" :value="index" class="bold">{{ layer.label }}</option>
      </select>
    </div>
    <div id="query_builder_fields" class="margin-between-element">
      <div id="query_builder_fields_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.fields'"></div>
      <div id="query_builder_fields_content" class="querybuilder-content">
        <table class="table table-striped content-table">
          <tbody>
            <tr v-for="field in fields" :key="field" @click="select.field = field" @dblclick="addToExpression({value: field, type: 'field'})" :class="{'skin-background-color lighten': select.field===field}" style="cursor: pointer">
              <th scope="row">{{ field }}</th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id="query_builder_values" class="margin-between-element">
      <div id="query_builder_values_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.values'"></div>
      <div v-if="!manual" id="query_builder_values_content" class="querybuilder-content margin-between-element">
        <bar-loader :loading="loading.values"></bar-loader>
        <table class="table table-striped content-table">
          <tbody>
            <tr v-for="value in values" @click="select.value = value" :class="{'skin-background-color lighten': select.value===value}" :key="value" @dblclick="addToExpression({value: value, type: 'value'})" style="cursor: pointer">
              <th scope="row">{{ value }}</th>
            </tr>
            <tr>
              <th scope="row"></th>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else id="querybuilder-manual" class="margin-between-element" style="display:flex; justify-content: space-between; align-items: stretch">
        <input class="form-control" style="" v-model="manualvalue" style="border: 0;">
        <span style="cursor: pointer; font-size: 1.2em; background-color: white; color: #000000; padding: 9px;"
              @click="manualvalue && addToExpression({value: manualvalue, type: 'value'})"
              :class="g3wtemplate.getFontClass('plus')"></span>
      </div>
      <div id="query_builder_values_buttons" class="content-end skin-color">
        <button id="query_builder_values_buttons_sample" class="query_builder_button btn btn-secondary bold " v-t="'sdk.querybuilder.panel.button.manual'" @click="manual = true" :class="{'skin-border-color' : manual}"></button>
        <button id="query_builder_values_buttons_all" class="query_builder_button btn btn-secondary bold " v-t="'sdk.querybuilder.panel.button.all'" @click="all" :disabled="select.field === null" :class="{'skin-border-color' : !manual}"></button>
      </div>
    </div>
    <div id="query_builder_operators" class="margin-between-element" style="margin-top: auto !important">
      <div id="query_builder_operators_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.operators'"></div>
      <div id="query_builder_operators_content" class="content-wrap">
        <button v-for="operator in operators" @click="addToExpression({value: operator, type: 'operator'})" :key="operator" class="query_builder_button btn btn-secondary skin-color bold">{{ operator }}</button>
      </div>
    </div>
    <div id="query_builder_footer">
      <div id="query_builder_expression">
        <div id="query_builder_expression_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.expression'"></div>
        <div id="query_builder_expression_content">
          <textarea style="width: 100%; resize: none; height: 100px; color:#000000" v-model="filter"></textarea>
        </div>
      </div>
      <div id="query_builder_message" class="margin-between-element">
        <bar-loader :loading="loading.test"></bar-loader>
        <span class="bold">{{message}}</span>
      </div>
      <div id="query_builder_footer_buttons" class="content-end margin-between-element">
        <button class="query_builder_button btn btn-secondary  bold" @click="test" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.test'"></button>
        <button class="query_builder_button btn btn-secondary  bold" @click="reset" v-t="'sdk.querybuilder.panel.button.clear'"></button>
        <button class="query_builder_button btn btn-secondary  bold" @click="run" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.run'"></button>
        <button class="query_builder_button btn btn-secondary  bold" @click="save" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.save'"></button>
      </div>
    </div>
</div>
